<template>
  <div>
    <el-input
      class="input-new-tag"
      v-if="inputVisible"
      v-model="inputValue.name"
      ref="saveTagInput"
      size="medium"
      effect="plain"
      placeholder="输入内容"
    >
      <template slot="append">
        <el-upload
          v-if="isUpload"
          list-type="picture"
          accept=".jpg,.png"
          :action="'#'"
          :limit="1"
          :auto-upload="false"
          :file-list="fileList"
          :on-change="getFile"
          :show-file-list="false"
          :on-success="handleSuccess"
          :before-upload="beforeUpload"
        >
          <el-button icon="el-icon-upload"></el-button>
        </el-upload>
        <el-button @click="handleInputConfirm">确认</el-button>
      </template>
    </el-input>
    <el-button v-else class="button-new-tag" size="medium" @click="showInput"
      >+ {{ label }}</el-button
    >
  </div>
</template>

<script>
export default {
  name: "ComAddButton",
  props: {
    isUpload: {
      type: Boolean,
      default: true,
    },
    label: {
      type: String,
      default: "默认标题",
    },
  },
  data() {
    return {
      // 输入框的值
      // inputValue: "",

      //收集输入的数据
      inputValue: {
        pid: "",
        type: "",
        name: "",
        base64: "",
        format: "",
        consultType: {
          type: "",
        },
      },

      fileList: [],

      // 控制显示输入框
      inputVisible: false,
    };
  },
  methods: {
    //   显示输入框
    showInput() {
      const _this = this;

      _this.inputVisible = true;
      _this.$nextTick((_) => {
        _this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    // 点击确认传递回父组件
    handleInputConfirm() {
      const _this = this;
      _this.$emit("Event-blurInput", _this.inputValue);
      _this.inputValue = {
        pid: "",
        type: "",
        name: "",
        base64: "",
        format: "",
        consultType: {
          type: "",
        },
      };
      _this.inputVisible = false;
    },

    //通过getFile方法获取文件信息
    getFile(file, fileList) {
      // console.log(file,'file')
      this.getBase64(file.raw).then((res) => {
        const params = res;
        this.inputValue.base64 = params;
      });
      // console.log(this.inputValue);
    },
    //上传成功
    handleSuccess(response) {
      console.log(111);
      this.$message({
        type: "success",
        message: "上传成功!",
      });
    },
    //上传失败
    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 图片转base64编码：
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        const reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          // console.log(reader.result,'reader.result')
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.input-new-tag {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  border-top: 1px solid #e6ebf5;
  display: flex;
}
::v-deep .input-new-tag .el-input__inner {
  width: 100%;
  border: 0;
  height: 47px;
  line-height: 47px;
  background-color: #f8f8f8;
}
::v-deep .input-new-tag .el-input-group__append {
  display: flex;
  align-items: center;
  width: auto;
  padding: 0 10px;
  border: 0;
  border-left: 1px solid #f8f8f8;
  background-color: #f8f8f8;
}
::v-deep .input-new-tag .el-input-group__append > div {
  margin-right: 25px;
}
::v-deep .input-new-tag .el-input-group__append .el-icon-upload {
  font-size: 20px;
}
::v-deep .input-new-tag .el-input-group__append > button {
  padding-left: 0;
}
.button-new-tag {
  position: absolute;
  bottom: 0;
  left: 0;
  border: 0;
  z-index: 2;
  display: block;
  width: 100%;
  font-size: 16px;
  padding: 15px 20px;
  background-color: #f8f8f8;
  border-top: 1px solid #e6ebf5;
}
</style>